<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header animate__animated animate__fadeInDown">
			<text class="title">{{teacherName}}的评分</text>
			<text class="subtitle">管理评分项目和记录</text>
		</view>

		<!-- 老师信息卡片 -->
		<view class="profile-card animate__animated animate__fadeIn">
			<view class="avatar">{{teacherName.charAt(0)}}</view>
			<view class="profile-info">
				<text class="name">{{teacherName}}</text>
				<view class="score-container">
					<text class="score-label">当前总分</text>
					<text class="score">{{ totalScore }}</text>
					<text class="score-unit">分</text>
				</view>
			</view>
			<view class="decoration-circle circle-1"></view>
			<view class="decoration-circle circle-2"></view>
		</view>

		<!-- 日期选择器 -->
		<view class="date-picker animate__animated animate__fadeIn">
			<uni-icons type="calendar" size="20" color="#666"></uni-icons>
			<input type="date" v-model="selectedDate" class="date-input" />
		</view>

		<!-- 评分操作按钮 -->
		<view class="action-buttons animate__animated animate__fadeIn">
			<button class="action-button decrease" @click="openScorePopup('decrease')">
				<uni-icons type="minus" size="20" color="#fff"></uni-icons>
				<text>减分</text>
			</button>
			<button class="action-button increase" @click="openScorePopup('increase')">
				<uni-icons type="plus" size="20" color="#fff"></uni-icons>
				<text>加分</text>
			</button>
		</view>

		<!-- 评分项目卡片 -->
		<view class="card animate__animated animate__fadeIn">
			<view class="card-header">
				<text class="card-title">评分项目</text>
				<button class="add-button" @click="addActivity">
					<uni-icons type="plus" size="16" color="#fff"></uni-icons>
					<text>新增</text>
				</button>
			</view>
			<view class="card-body">
				<radio-group @change="onRadioChange" class="activity-list">
					<label class="activity-item" v-for="activity in activities" :key="activity.id">
						<view class="activity-content">
							<radio :value="activity.name" :checked="activity.name === selectedActivity" color="#3cbbff" />
							<text class="activity-name">{{activity.name}}</text>
						</view>
						<view class="activity-actions">
							<button class="edit-button" @click.stop="editActivity(activity)">
								<uni-icons type="compose" size="16" color="#666"></uni-icons>
							</button>
							<button class="delete-button" @click.stop="deleteActivity(activity)">
								<uni-icons type="trash" size="16" color="#f44336"></uni-icons>
							</button>
						</view>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 评分记录卡片 -->
		<view class="card animate__animated animate__fadeIn">
			<view class="card-header">
				<text class="card-title">评分记录</text>
				<button class="edit-toggle" @click="toggleDeleteButtons">
					<uni-icons :type="showDeleteButtons ? 'checkmark' : 'compose'" size="16" color="#666"></uni-icons>
					<text>{{showDeleteButtons ? '完成' : '编辑'}}</text>
				</button>
			</view>
			<view class="card-body">
				<view v-for="(scores, date) in groupedScores" :key="date" class="score-group">
					<view class="date-title">{{ date }}</view>
					<view class="score-item" v-for="(score, index) in scores" :key="score.id">
						<view class="score-info">
							<text class="score-index">{{ (index + 1) + "." }}</text>
							<text class="score-name">{{ score.scoreName }}</text>
							<text class="score-value" :class="{'positive': score.score > 0, 'negative': score.score < 0}">
								{{ score.score > 0 ? '+' : '' }}{{ score.score }}
							</text>
						</view>
						<button v-if="showDeleteButtons" class="delete-score-button" @click.stop="deleteScore(score.id)">
							<uni-icons type="trash" size="16" color="#f44336"></uni-icons>
						</button>
					</view>
				</view>
				<view v-if="scores.length === 0" class="empty-tips">
					<uni-icons type="info" size="20" color="#999"></uni-icons>
					<text>暂无评分记录</text>
				</view>
			</view>
		</view>

		<!-- 分数选择弹窗 -->
		<view v-if="showScorePopup" class="score-popup animate__animated animate__fadeIn" @click="closeScorePopup">
			<view class="score-popup-content" @click.stop>
				<text class="popup-title">选择{{scoreChangeDirection > 0 ? '加分' : '减分'}}分数</text>
				<view class="score-options">
					<view class="score-option" v-for="n in 5" :key="n" @click="selectScore(n * scoreChangeDirection)"
						:style="{background: getScoreColor(n * scoreChangeDirection)}">
						{{ n * scoreChangeDirection > 0 ? '+' : '' }}{{ n * scoreChangeDirection }}分
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	// import uniIcons from '@/components/uni-icons/uni-icons.vue';

	export default {
		// components: {
		// 	uniIcons
		// },
		data() {
			const currentDate = new Date().toISOString().split('T')[0];
			return {
				activities: [],
				totalScore: 0,
				selectedActivity: '',
				showScorePopup: false,
				scoreChangeDirection: 1,
				teacherName: "",
				teacherId: 0,
				scores: [],
				selectedDate: currentDate,
				showDeleteButtons: false,
			};
		},
		onLoad(e) {
			this.teacherName = e.teacherName;
			this.teacherId = e.teacherId;
			this.loadScores();
		},
		created() {
			this.loadActivities();
		},
		computed: {
			groupedScores() {
				const sortedScores = this.scores.slice().sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
				return sortedScores.reduce((groups, score) => {
					const date = new Date(score.timestamp).toISOString().split('T')[0];
					if (!groups[date]) {
						groups[date] = [];
					}
					groups[date].push(score);
					return groups;
				}, {});
			}
		},
		methods: {
			loadActivities() {
				const cachedActivities = uni.getStorageSync('activities');
				this.activities = cachedActivities ? JSON.parse(cachedActivities) : [{
					id: 1,
					name: '课堂互动'
				}, {
					id: 2,
					name: '作业完成情况'
				}];
				if (!cachedActivities) {
					this.saveActivities();
				}
			},
			loadScores() {
				uni.request({
					url: globalVariable + "/getTeacherScoreByTeacherId?teacherId=" + this.teacherId,
					success: (res) => {
						const info = res.data;
						uni.showToast({
							title: info.message
						});
						this.scores = info.data || [];
						this.totalScore = this.scores.reduce((total, score) => total + score.score, 0);
					}
				});
			},
			onRadioChange(event) {
				this.selectedActivity = event.detail.value;
			},
			saveActivities() {
				uni.setStorageSync('activities', JSON.stringify(this.activities));
			},
			editActivity(activity) {
				uni.showModal({
					title: '编辑评分项',
					content: '',
					editable: true,
					placeholderText: '请输入新的评分项名称',
					confirmText: '保存',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm && res.content) {
							const index = this.activities.findIndex(a => a.id === activity.id);
							if (index !== -1) {
								this.activities[index].name = res.content;
								this.saveActivities();
								if (this.selectedActivity === activity.name) {
									this.selectedActivity = res.content;
								}
							}
						}
					}
				});
			},
			deleteActivity(activity) {
				uni.showModal({
					title: '提示',
					content: `确定删除评分项"${activity.name}"吗？`,
					confirmColor: '#f44336',
					success: (res) => {
						if (res.confirm) {
							this.activities = this.activities.filter(a => a.id !== activity.id);
							if (this.selectedActivity === activity.name) {
								this.selectedActivity = '';
							}
							this.saveActivities();
						}
					}
				});
			},
			addActivity() {
				uni.showModal({
					title: '新增评分项',
					content: '',
					editable: true,
					placeholderText: '请输入评分项名称',
					confirmText: '添加',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm && res.content) {
							this.activities.push({
								id: Date.now(),
								name: res.content
							});
							this.saveActivities();
						}
					}
				});
			},
			openScorePopup(direction) {
				this.scoreChangeDirection = direction === 'increase' ? 1 : -1;
				this.showScorePopup = true;
			},
			closeScorePopup() {
				this.showScorePopup = false;
			},
			toggleDeleteButtons() {
				this.showDeleteButtons = !this.showDeleteButtons;
			},
			deleteScore(scoreId) {
				uni.showModal({
					title: '提示',
					content: '确定删除这条评分记录吗？',
					confirmColor: '#f44336',
					success: (res) => {
						if (res.confirm) {
							this.deleteScoreRequest(scoreId);
						}
					}
				});
			},
			deleteScoreRequest(scoreId) {
				uni.request({
					url: globalVariable + "/deleteTeacherScore?id=" + scoreId,
					method: 'POST',
					success: (res) => {
						uni.showToast({
							title: res.data.message
						});
						if (res.data.status == 1) {
							this.scores = this.scores.filter(score => score.id !== scoreId);
							this.totalScore = this.scores.reduce((total, score) => total + score.score, 0);
						}
					}
				});
			},
			selectScore(amount) {
				if (!this.selectedActivity) {
					uni.showToast({
						title: "请选择一个评分项",
						icon: 'none'
					});
					return;
				}
				if (this.selectedDate === "") {
					uni.showToast({
						title: "请选择日期",
						icon: 'none'
					});
					return;
				}

				const role = amount > 0 ? 1 : 0;
				const absAmount = Math.abs(amount);

				uni.request({
					url: globalVariable + "/insertTeacherScore",
					method: 'POST',
					data: {
						teacherId: this.teacherId,
						teacherName: this.teacherName,
						score: absAmount,
						scoreName: this.selectedActivity,
						role: role,
						timestamp: this.selectedDate
					},
					success: (res) => {
						this.showScorePopup = false;
						uni.showToast({
							title: res.data.message
						});
						this.totalScore += amount;
						this.scores.push({
							scoreName: this.selectedActivity,
							role: role,
							score: amount,
							timestamp: this.selectedDate
						});
					}
				});
			},
			getScoreColor(score) {
				return score > 0 ? '#52c41a' : '#f5222d';
			}
		}
	};
</script>

<style scoped>
	/* 引入动画库 */
	@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
	
	.container {
		padding: 20rpx 30rpx 40rpx;
		min-height: 100vh;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
	}
	
	.container::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(60, 187, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
		z-index: -1;
		animation: gradientRotate 15s infinite linear;
	}
	
	@keyframes gradientRotate {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	/* 头部样式 */
	.header {
		margin-bottom: 30rpx;
		position: relative;
		z-index: 1;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	/* 老师信息卡片 */
	.profile-card {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		position: relative;
		overflow: hidden;
	}
	
	.decoration-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(60, 187, 255, 0.1);
		z-index: -1;
	}
	
	.circle-1 {
		width: 150rpx;
		height: 150rpx;
		top: -50rpx;
		right: -50rpx;
	}
	
	.circle-2 {
		width: 100rpx;
		height: 100rpx;
		bottom: -30rpx;
		left: -30rpx;
	}
	
	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #3cbbff, #6a5acd);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		font-weight: bold;
		margin-right: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.profile-info {
		flex: 1;
	}
	
	.name {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10rpx;
	}
	
	.score-container {
		display: flex;
		align-items: baseline;
	}
	
	.score-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}
	
	.score {
		font-size: 48rpx;
		font-weight: bold;
		color: #3cbbff;
		margin-right: 6rpx;
	}
	
	.score-unit {
		font-size: 28rpx;
		color: #666;
	}
	
	/* 日期选择器 */
	.date-picker {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 12rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
	}
	
	.date-input {
		flex: 1;
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #333;
		background: transparent;
	}
	
	/* 操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.action-button {
		width: 48%;
		height: 90rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		position: relative;
		overflow: hidden;
	}
	
	.action-button::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
		z-index: -1;
	}
	
	.action-button text {
		margin-left: 10rpx;
	}
	
	.action-button:active {
		transform: translateY(4rpx);
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	
	.increase {
		background: linear-gradient(135deg, rgba(82, 196, 26, 0.8), rgba(115, 209, 61, 0.8));
		color: #fff;
	}
	
	.decrease {
		background: linear-gradient(135deg, rgba(245, 34, 45, 0.8), rgba(255, 77, 79, 0.8));
		color: #fff;
	}
	
	/* 卡片样式 */
	.card {
		background: rgba(255, 255, 255, 0.8);
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		overflow: hidden;
		transition: all 0.3s;
	}
	
	.card:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 12rpx 28rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}
	
	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.add-button, .edit-toggle {
		background: rgba(60, 187, 255, 0.8);
		color: #fff;
		border: none;
		border-radius: 40rpx;
		padding: 8rpx 24rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		transition: all 0.3s;
	}
	
	.add-button:active, .edit-toggle:active {
		transform: scale(0.95);
	}
	
	.add-button text, .edit-toggle text {
		margin-left: 8rpx;
	}
	
	.card-body {
		padding: 0 30rpx;
	}
	
	/* 评分项目列表 */
	.activity-list {
		padding: 20rpx 0;
	}
	
	.activity-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx dashed rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
	}
	
	.activity-item:active {
		background-color: rgba(250, 250, 250, 0.5);
	}
	
	.activity-item:last-child {
		border-bottom: none;
	}
	
	.activity-content {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.activity-name {
		font-size: 30rpx;
		color: #333;
		margin-left: 20rpx;
	}
	
	.activity-actions {
		display: flex;
	}
	
	.edit-button, .delete-button {
		background: none;
		border: none;
		padding: 10rpx;
		margin-left: 20rpx;
		transition: all 0.3s;
	}
	
	.edit-button:active, .delete-button:active {
		transform: scale(0.9);
	}
	
	/* 评分记录 */
	.score-group {
		margin-bottom: 20rpx;
	}
	
	.date-title {
		font-size: 28rpx;
		color: #666;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
	}
	
	.score-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx dashed rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
	}
	
	.score-item:active {
		background-color: rgba(250, 250, 250, 0.5);
	}
	
	.score-item:last-child {
		border-bottom: none;
	}
	
	.score-info {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.score-index {
		font-size: 28rpx;
		color: #999;
		width: 60rpx;
	}
	
	.score-name {
		font-size: 30rpx;
		color: #333;
		flex: 1;
	}
	
	.score-value {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 30rpx;
	}
	
	.positive {
		color: #52c41a;
	}
	
	.negative {
		color: #f5222d;
	}
	
	.delete-score-button {
		background: none;
		border: none;
		padding: 10rpx;
		transition: all 0.3s;
	}
	
	.delete-score-button:active {
		transform: scale(0.9);
	}
	
	.empty-tips {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.empty-tips text {
		margin-top: 20rpx;
	}
	
	/* 分数选择弹窗 */
	.score-popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
	}
	
	.score-popup-content {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 20rpx;
		width: 80%;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		animation: popupIn 0.3s ease-out;
	}
	
	@keyframes popupIn {
		0% {
			transform: scale(0.9);
			opacity: 0;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
	
	.popup-title {
		font-size: 34rpx;
		font-weight: bold;
		color: #333;
		display: block;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.score-options {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.score-option {
		width: 30%;
		padding: 25rpx 0;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		transition: all 0.3s;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.score-option:active {
		transform: scale(0.95);
	}
	
	/* 响应式调整 */
	@media (min-width: 768px) {
		.container {
			max-width: 750px;
			margin: 0 auto;
		}
	}
</style>